<%@ include file="/html/init.jsp" %>

<portlet:actionURL var="addColumnURL" name="addColumn" /> 
<aui:form name="fm" method="post" action="<%= addColumnURL.toString() %>" id="fm">
	<aui:input name="cmd" type="hidden" value="addColumn" />
	<div class="columnLayout">
		<div class="row">
			<input type="text" class="columnName0 validate[required]" id="columnName0" name="columnName" />
			<select id="columnType0" name='columnType'>
		        <option value='15'>String</option>
		        <option value='9'>int</option>
		        <option value='11'>long</option>
		    </select>
			<img name='addimg' src='/html/themes/control_panel/images/common/add.png' alt="AddColumn" onclick="addRow()" />
			<img name='delimg' src='/html/themes/control_panel/images/common/delete.png' alt="DelImage" /><br/><br/>
		</div>
	</div>
	
	<aui:input type="submit" name="save" value="save" label="" onClick="return validateForm()" />

</aui:form>

<script type="text/javascript">
	jQuery.noConflict = function() { return this; };
	
    var rc = 1;
    
    function addRow() {   	
        var rowid = 'row' + rc;
        var rowx="<div class='" + rowid + "'>";
        rowx += "<input id='columnName" + rc + "' type='text' name='columnName'/>&nbsp;";
        rowx += "<select id='columnType"+ rc +"' name='columnType'>";
        rowx += "<option value='15'>String</option><option value='9'>int</option><option value='11'>long</option>";
        rowx += "</select>&nbsp;";
        rowx += "<img src='/html/themes/control_panel/images/common/add.png' alt='AddColumn' name='addimg' onclick='addRow()'/>&nbsp;";
        rowx += "<img name='delimg' src='/html/themes/control_panel/images/common/delete.png' alt='DelImage'  onclick=\""+"deleteRow('"+rowid+"')\"/>";
        rowx += "<br/><br/></div>";
        jQuery('.columnLayout').append(rowx);
        rc++; 
    }
    
    function deleteRow(rowid) {
        jQuery('.'+rowid).remove();
    }
    
	function validateForm(){
	    var result = jQuery('#<portlet:namespace/>fm').validationEngine({returnIsValid:true});
	    return result;
	}    
 </script>